import React, { useEffect, useMemo, useCallback } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import URI from 'urijs';
import dayjs from 'dayjs';
import './App.css';
import Header from '../common/Header';
import Detail from '../common/Detail';
import Account from './Account';
import Choose from './Choose';
import Passengers from './Passengers';
import Ticket from './Ticket.js';
import Menu from './Menu.js';

import {
  setArriveStation,
  setDepartStation,
  setTrainNumber,
  setDepartDate,
  setSeatType,
  setSearchParsed,
  fetchInitial,
  createAdult,
  createChild,
  removePassenger,
  updatePassenger,
  hideMenu,
  showGenderMenu,
  showFollowAdult,
  showTicketTypeMenu,
} from './actions';

function App(props) {
  const {
    trainNumber,
    departStation,
    arriveStation,
    seatType,
    departDate,
    arriveDate,
    departTimeStr,
    arriveTimeStr,
    durationStr,
    price,
    passengers,
    menu,
    isMenuVisible,
    searchParsed,
    dispatch,
  } = props;
  const onBack = useCallback(() => {
    window.history.back();
  }, []);
  const passengersCbs = useMemo(() => {
    return bindActionCreators(
      {
        createAdult,
        createChild,
        removePassenger,
        updatePassenger,
        showGenderMenu,
        showFollowAdult,
        showTicketTypeMenu,
      },
      dispatch
    );
  }, [dispatch]);
  const menuCbs = useMemo(() => {
    return bindActionCreators({ hideMenu }, dispatch);
  }, [dispatch]);

  const chooseCbs = useMemo(() => {
    return bindActionCreators({ updatePassenger }, dispatch);
  }, [dispatch]);
  useEffect(() => {
    const queries = URI.parseQuery(window.location.search);
    const { trainNumber, dStation, aStation, type, date } = queries;
    //派发action
    dispatch(setTrainNumber(trainNumber));
    dispatch(setDepartStation(dStation));
    dispatch(setArriveStation(aStation));
    dispatch(setSeatType(type));
    // yyyy-MM -dd  valueOf转化为 时间毫秒值
    dispatch(setDepartDate(dayjs(date).valueOf()));
    dispatch(setSearchParsed(true));
    //如果没有解析完成,不进行渲染操作
  }, [dispatch]);

  //发起异步请求
  useEffect(() => {
    //如果没有解析完成,不发起异步请求获取服务端数据
    if (!searchParsed) {
      return;
    }
    //数据解析完成,向服务端发起异步请求
    const uri = new URI('/rest/order')
      .setSearch('dStation', departStation)
      .setSearch('aStation', arriveStation)
      .setSearch('type', seatType)
      .setSearch('date', departDate)
      .toString();

    //dispatch 发起异步请求
    dispatch(fetchInitial(uri));
  }, [
    searchParsed,
    departStation,
    arriveStation,
    seatType,
    departDate,
    dispatch,
  ]);

  if (!searchParsed) {
    return null;
  }
  return (
    <div className="app">
      <div className="header-wrapper">
        <Header title="订单详情" onBack={onBack}></Header>
      </div>
      {/* 车次详情页 */}
      <div className="detail-wrapper">
        <Detail
          departDate={departDate}
          arriveDate={arriveDate}
          departTimeStr={departTimeStr}
          arriveTimeStr={arriveTimeStr}
          trainNumber={trainNumber}
          departStation={departStation}
          arriveStation={arriveStation}
          durationStr={durationStr}
        >
          <span
            style={{ display: 'block', margin: '0' }}
            className="train-icon"
          ></span>
        </Detail>
        <Ticket price={price} type={seatType} />
        <Passengers passengers={passengers} {...passengersCbs} />
        {passengers.length > 0 && (
          <Choose passengers={passengers} {...chooseCbs} />
        )}
      </div>
      <Account price={price} length={passengers.length} />
      <Menu show={isMenuVisible} {...menu} {...menuCbs} />
    </div>
  );
}

const mapStateToProps = (state) => {
  return state;
};

const mapDispatchToProps = (dispatch) => {
  return { dispatch };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
